<template>
	<view class="addinfo-bg">
		<view class="title">请选择状态</view>
		<view class="card-box" v-for="(item,index) in dataList" :key="index" @click="clickSexItem(item)">
			<!-- 	<view class="card-box" v-if="type != 2">
				<view class="card" v-if="type != 2 && index !=2">
					<view class="c-title">
						<view class="left">
							<view class="c-t">{{item.title}}</view>
							<view class="c-s">{{item.text}}</view>
						</view>
					</view>
					<view class="card-img">
						<image :src="item.img" mode=""></image>
					</view>
				</view>
			</view>
			<view class="card-box" v-else> -->
			<view class="card">
				<view class="c-title">
					<view class="left">
						<view class="c-t">{{item.title}}</view>
						<view class="c-s">{{item.text}}</view>
					</view>
				</view>
				<view class="card-img">
					<image :src="item.img" mode=""></image>
				</view>
			</view>
			<!-- </view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [{
						id: 0,
						title: '怀孕中',
						text: 'PREGNANT',
						img: '../../../static/index/uman.png'
					},
					{
						id: 1,
						title: '宝宝已出生',
						text: 'DARLING CHILD',
						img: '../../../static/index/baby.png'
					},
					// {
					// 	id: 2,
					// 	title: '其他',
					// 	text: 'OTHER STATES',
					// 	img: '../../../static/index/man.png'
					// }
				],
				type: 0,
				userNewStatus: uni.getStorageSync('userNewStatus')
			};
		},
		onLoad(options) {
			this.type = options.type
		},
		// 监听导航按钮(如果是左边就返回上一页)
		onNavigationBarButtonTap(e) {
			if (e.float == "left") {
				window.history.back(-1);
			}
		},
		methods: {
			clickSexItem(v) {
				let type = '' //0 怀孕 ，1 以出生 ，2 老用户-怀孕 ，3 老用户-以出生
				 if(v.id == 0 && !this.userNewStatus){
					type = 0
				}else if(v.id == 1 && !this.userNewStatus){
					type = 1
				}else if(v.id == 0 && this.userNewStatus){
					type = 2
				}else if(v.id == 1 && this.userNewStatus){
					type = 3
				}
				uni.navigateTo({
					url: '../addInfoDetails/index?type=' + type
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		height: 100%;
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.addinfo-bg {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;

		.title {
			width: 85%;
			font-size: 6vw;
			margin: 1.5vh 0;
			align-items: flex-start;
			justify-content: flex-start;
			color: #333333;
			font-weight: bold;
		}

		.card-box {
			width: 100%;
			.flex;

			.card {
				.flex;
				height: 16vh;
				width: 85%;
				border-radius: 16upx;
				background-color: #fff;
				box-shadow: 0px 2px 20px 0px rgba(153, 153, 153, 0.2);
				position: relative;

				.c-title {
					flex: 0.6;
					.flex;
					flex-direction: column;

					.left {
						.flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: flex-start;
						width: 65%;

						.c-t {
							font-size: 5vw;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #333333;
							line-height: 24px;
							line-height: 1.5;
						}

						.c-s {
							font-size: 4vw;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #999999;
							line-height: 24px;
						}
					}
				}

				.card-img {
					flex: 0.4;
					height: 100%;
					width: 100%;
					.flex;
					padding-top: 1.5vh;

					image {
						height: 100%;
						width: 80%;
					}
				}
			}

		}

		.card-box:nth-child(3) {
			margin: 3vh 0 !important;
		}
	}
</style>
